<template>
    <div>
        <div class="left-box">
            <myTitle title="设备分类信息"></myTitle>
            <div
                class="left-box-chart"
                ref="leftChartRef"
                v-loading="loading"
                element-loading-text="数据加载中"
                element-loading-spinner="el-icon-loading"
                element-loading-background="rgba(0, 0, 0, 0.8)"
            >
                <div style="text-align: center">
                    <el-empty
                        description="暂无相关数据"
                        :image-size="80"
                    ></el-empty>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import myTitle from "../../components/title.vue";
import { getBaDeviceType } from "@/api/sendhttp/baKanban";
export default {
    components: { myTitle },
    name: "leftBox",
    data() {
        return {
            chartData: [],
            loading: false,
        };
    },
    created() {},
    mounted() {
        // this.initChart();
        this.getData();
    },
    methods: {
        async getData() {
            this.loading = true;
            const {
                data: { code, data, msg },
            } = await getBaDeviceType();
            this.loading = false;
            if (code == "200") {
                this.chartData = data.map((item) => {
                    return {
                        value: item.total,
                        name: item.type_name_ch,
                    };
                });
                this.initChart();
            } else {
                this.loading = false;
                this.$message({
                    message: msg,
                    type: "error",
                });
            }
        },
        initChart() {
            var chartBox = this.$refs.leftChartRef;
            let myChart = this.$echarts.getInstanceByDom(
                this.$refs.leftChartRef
            );
            if (myChart == null) {
                myChart = this.$echarts.init(chartBox);
            }
            let option = {
                tooltip: {
                    trigger: "item",
                },
                legend: {
                    top: "35%",
                    left: "left",
                    orient: "vertical",
                },
                color: [
                    "#cc00ff",
                    "#C1EBDD",
                    "#FFC851",
                    "#5A5476",
                    "#1869A0",
                    "#FF9393",
                ],
                series: [
                    {
                        name: "",
                        type: "pie",
                        radius: ["40%", "60%"],
                        center: ["60%", "50%"], //调整饼图的位置
                        avoidLabelOverlap: false,
                        itemStyle: {
                            borderRadius: 10,
                            borderColor: "#fff",
                            borderWidth: 0,
                        },
                        label: {
                            show: true,
                            formatter: function (data) {
                                //显示数量、百分比
                                return `${data.name} \n ${data.value}个`;
                            },
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 20,
                                fontWeight: "bold",
                            },
                        },
                        labelLine: {
                            show: true,
                        },
                        data: this.chartData,
                    },
                ],
            };
            option && myChart.setOption(option);
            window.addEventListener("resize", function () {
                myChart.resize();
            });
        },
    },
};
</script>
<style lang="scss" scoped>
/* @import url(); 引入css类 */
.left-box {
    height: 400px;
    .left-box-chart {
        width: 100%;
        height: 100%;
    }
}
</style>
